<template>
    <div>
      <el-tree
        ref="menuTree"
        :data="menus"
        :props="defaultProps"
        @node-click="handleNodeClick"
        node-key="catId"
        highlight-current
        accordion
      >
      </el-tree>
    </div>
  </template>
  
  <script>
  export default {
    name: "RenrenFastVueCategory",
  
    data() {
      return {
        menus: [],
        defaultProps: {
          children: "children",
          label: "name",
        },
      };
    },
  
    created() {
      this.getMenus();
    },
    mounted() {},
  
    methods: {
      //每次点击的时候
      handleNodeClick(data,node,component) {
        console.log(data,node,component);
        //向父组件发送事件
        this.$emit('tree-node-click', data,node,component);
      },
      getMenus() {
        this.$http({
          url: this.$http.adornUrl("/product/category/list/tree"),
          methods: "get",
        }).then((data) => {
          console.log("成功获取到菜单信息", data.data.data);
          this.menus = data.data.data;
        });
      },
    },
  };
  </script>
  
  <style lang="scss">
  .el-tree-node.is-current > .el-tree-node__content {
      background-color: rgb(69, 194, 181) !important;
  }
  </style>